/* 商品活动详情  qgj*/

<template>
  <div class="mh100">
    <div class="page-container">
        <div class="split-content-info">
          <!-- 标题 -->
          <div class="split-content-title clearfix">
            <div class="split-title">
              <span style="display:inline-block; background-color: #1890FF;margin-bottom: -2px; margin-right: 8px; width: 3px; height: 14px"></span>
              <span style="display: inline-block; color: #333333; font-size: 16px;">基本信息</span>
            </div>
          </div>
          <div>
            <el-descriptions class="margin-top" :column="3" border>
              <el-descriptions-item labelStyle="width: 15%" contentStyle="width: 250px" label="活动名称">{{ form.name }}</el-descriptions-item>
              <el-descriptions-item labelStyle="width: 15%" contentStyle="width: 250px" label="活动类型">{{ getType(form.type) }}</el-descriptions-item>
              <el-descriptions-item labelStyle="width: 15%" contentStyle="width: 250px" label="状态">{{ getStatus(form.status) }}</el-descriptions-item>
              <el-descriptions-item label="生效日期">{{ form.startDate }}</el-descriptions-item>
              <el-descriptions-item label="失效日期">{{ form.endDate }}</el-descriptions-item>
              <el-descriptions-item label="活动编号">{{ form.code }}</el-descriptions-item>
              <el-descriptions-item label="活动说明">{{ form.activityDesc }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions class="margin-top" :column="3" border>
              <el-descriptions-item labelStyle="width: 15%" contentStyle="width: 250px" label="备注">{{ form.remark }}</el-descriptions-item>
              
            </el-descriptions>
          </div>
        </div>

        <!-- 模块分割线 -->
        <div class="split-line"></div>
        <!-- 模块分割线 -->
        <div class="split-content-info">
          <div class="split-content-title clearfix">
            <div class="split-title">
              <span style="display:inline-block; background-color: #1890FF;margin-bottom: -2px; margin-right: 8px; width: 3px; height: 14px"></span>
              <span style="display: inline-block; color: #333333; font-size: 16px;">活动规则</span>
            </div>
          </div>
          <div style="min-height:400px">
            <el-table
              :data="form.activityRuleDtoList" 
              ref="filterTable"
              :row-style="{height:'48px'}"
            >
              <el-table-column label="序号" align="left" type="index" width="60"/>
              <el-table-column label="品牌" align="left" prop="brandTypes" min-width="180">
                <template slot-scope="scope">
                  <div v-for="(item, index) in scope.row.brandTypes" :key="index">
                    <span>{{getBrandType(item)}}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="商品分类" align="left" prop="goodsTypes" min-width="200">
                <template slot-scope="scope">
                  <div v-for="(item, index) in scope.row.goodsTypes" :key="index">
                    <span>{{item.goodsType}}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="比较对象" align="left" prop="compareTarget" min-width="140">
                <template slot-scope="scope">
                  {{ getCompareTarget(scope.row) }}
                </template>
              </el-table-column>
              <el-table-column label="比较符" align="left" prop="compareSymbolLeft" min-width="120">
                <template slot-scope="scope">
                  {{ getCompareSymbolLeft(scope.row) }}
                </template>
              </el-table-column>
              <el-table-column label="比较数值从" align="right" prop="compareValueFrom" min-width="170">
              </el-table-column>
              <el-table-column label="比较符" align="left" prop="compareSymbolRight" min-width="120">
                <template slot-scope="scope">
                  {{ getCompareSymbolRight(scope.row) }}
                </template>
              </el-table-column>
              <el-table-column label="比较数值至" align="right" prop="compareValueTo" min-width="170">
              </el-table-column>
              <el-table-column label="ERP价目表" align="left" prop="priceCodes" min-width="200">
                <template slot-scope="scope">
                  <div v-for="(item, index) in scope.row.priceCodes" :key="index">
                    <span>{{item.priceCode}}</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>

        </div>
      <!-- </el-form> -->
      <div class="h84_line"></div>
      <div class="bottom-btn">
        <div class="bottom-locate" >
          <el-button type="primary" @click="cancel">返回</el-button>
          <!-- <el-button type="primary" :loading="saveloading" @click="save">确认</el-button> -->
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import {getGoodsActivity} from '@/api/basic/activity'

export default {
  name: 'CommodityActivityDetail',
  dicts: ['order_class_status', 'basic_data_goods_brand', 'goods_activity_type', 'compare_target', 'compare_symbol_left', 'compare_symbol_right'],
  data() {
    return {
      orderClassId: this.$route.query.orderClassId, // 订货分类id
      open: false, // 是否显示弹窗
      saveloading: false,
    //   labelPosition: "left",     // 表单label对齐方式
      form: {
        name: undefined, // 分类名称
        status: undefined, // 状态
        remark: undefined, // 备注
        orderClassRuleList: [], // 订货规则
      },
    }
  },
  created() {
    
  },
  mounted() {
    this.getGoodsActivity();
  },
  
  methods: {

    /**
     * 获取订货分类详情
     */
    getGoodsActivity() {
      if(this.$route.query.activityId){
        const str = JSON.parse(this.$route.query.activityId)
        getGoodsActivity(str).then(response => {
          console.log(response)
          // this.form = response.data

          const list = response.data.activityRuleDtoList;
          let groupItem = undefined;
          let addList = [];
          const count = list.length;
          list.forEach((item, index) => {
            this.$set(item, 'brandTypes', []);
            this.$set(item, 'goodsTypes', []);
            this.$set(item, 'priceCodes', []);
            if (item.groupCode == undefined || item.groupCode == null || item.groupCode == '' || item.groupCode.length == 0) {
              item.groupCode = index;
            }

            if (groupItem == undefined) {
              groupItem = JSON.parse(JSON.stringify(item));
            }
            if (groupItem.groupCode == item.groupCode) { // 表示在一个组
              groupItem.brandTypes.push({brandType: item.brandType});
              groupItem.goodsTypes.push({goodsType: item.goodsTypeName});
              groupItem.priceCodes.push({priceCode: item.priceCode != '1' ? item.priceAlias : '默认价格'});
              if (count == index + 1) { // 表示数组的最后条
                addList.push(JSON.parse(JSON.stringify(groupItem)));
                groupItem = undefined;
              }
            } else { // 不同
              addList.push(JSON.parse(JSON.stringify(groupItem)));
              // 下一个
              groupItem = JSON.parse(JSON.stringify(item));
              let brandType = '';
              groupItem.brandTypes.push({brandType: item.brandType});
              groupItem.goodsTypes.push({goodsType: item.goodsTypeName});
              groupItem.priceCodes.push({priceCode: item.priceCode != '1' ? item.priceName : '默认价格'});
              if (count == index + 1) { // 表示数组的最后条
                addList.push(JSON.parse(JSON.stringify(groupItem)));
                groupItem = undefined;
              }
            }
          });
          this.form = JSON.parse(JSON.stringify(response.data));
          this.form.activityRuleDtoList = addList;
          console.log('addList=', addList);
        })
      }
    },

    /**
     * 得到品牌
     * @param {*} row 
     */
    getBrandType(row) {
      let show = '/';
      this.dict.type.basic_data_goods_brand.some((item) => {
        if (item.value === row.brandType) {
          show = item.label;
          return true;
        }
      });
      return show;
    },

    /**
     * 得到比较对象
     * @param {*} row 
     */
    getCompareTarget(row) {
        console.log(this.dict.type.compare_target,row)
      let show = '';
      this.dict.type.compare_target.some((item) => {
        if (item.value === row.compareTarget) {
          show = item.label;
          return true;
        }
      });
      return show;
    },

    /**
     * 得到比较符左
     * @param {*} row 
     */
    getCompareSymbolLeft(row) {
      let show = '';
      this.dict.type.compare_symbol_left.some((item) => {
        if (item.value === row.compareSymbolLeft) {
          show = item.label;
          return true;
        }
      });
      return show;
    },
    
    /**
     * 得到比较符右
     * @param {*} row 
     */
    getCompareSymbolRight(row) {
      let show = '';
      this.dict.type.compare_symbol_right.some((item) => {
        if (item.value === row.compareSymbolRight) {
          show = item.label;
          return true;
        }
      });
      return show;
    },

    /**
     * 根据状态编码得到名称
     * @param {*} ste 
     */
    getStatus(ste) {
      let show = '';
      this.dict.type.order_class_status.some((item) => {
        if (item.value === ste) {
          show = item.label;
          return true;
        }
      });
      return show;
    },

    /**
     * 活动类型
     * @param {*} ste 
     */
    getType(ste) {
      let show = '';
      this.dict.type.goods_activity_type.some((item) => {
        if (item.value === ste) {
          show = item.label;
          return true;
        }
      });
      return show;
    },

    cancel() {
      const obj = { path: "/basicData/commodityActivity" };
      this.$tab.closeOpenPage(obj);
    },

    
  },
}
</script>

<style lang="scss" scoped>
</style>